<template>
  <div id="app">
    <router-view />
    <van-tabbar
      route
      active-color="#ee0a24"
      inactive-color="#000"
      v-show="!isShowshadow"
      v-if="$route.meta.isShowTabbar"
    >
      <van-tabbar-item replace to="/home" icon="home-o">首页</van-tabbar-item>
      <van-tabbar-item replace to="/topic" icon="label-o">专题</van-tabbar-item>
      <van-tabbar-item replace to="/category" icon="apps-o"
        >分类</van-tabbar-item
      >
      <van-tabbar-item replace to="/cart" icon="shopping-cart-o"
        >购物车</van-tabbar-item
      >
      <van-tabbar-item replace to="/user" icon="user-o">我的</van-tabbar-item>
    </van-tabbar>
  </div>
</template>
<script>
import { mapState } from "vuex";
export default {
  computed: {
    ...mapState({
      isShowshadow: (state) => state.Showshadow.isShowshadow,
    }),
    // 当出现点击过快出现页面和tabbar对应不上时的解决方法
    active: {
      get() {
        return $route.meta.tabbarActiveNum;
      },
      set() {},
    },
  },
};
</script>
<style lang="less">
#app {
  background: #efefef;
  // height: 100%;
  font-size: 0.14rem;
}
html,
body {
  height: 100%;
}
// 移动端位  rem
// rem的大小是以根节点html设置的font-size大小进行换算的
// 如果设置的根节点font-size：100px，那么1rem=100px
// 如果设置的根节点font-size：10px，那么1rem=10px
// 如果设置的根节点font-size：23px，那么1rem=23px
// 通常为了好运算会把html的font-size：100px
html {
  font-size: 100px !important;
}
</style>
